<template>
  <section class="head-category">
    <m-label class="item" icls="iconfont icon-huoqi" text="活期"></m-label>
    <m-label class="item" icls="iconfont icon-cunkuanlixi" text="银行存款" tip="热门"></m-label>
    <m-label class="item" icls="iconfont icon-jijin" text="基金"></m-label>
    <m-label class="item" icls="iconfont icon-baiwanbaoxiananxingoumai" text="保险"></m-label>
  </section>
</template>

<script>
import MLabel from '@/pages/comm-comp/m-label/m-label.vue'

export default {
  name: 'head-category',
  components: { MLabel }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/element.scss';

.head-category {
  @include list(row);
  .item {
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    padding: 35px 20px 20px 20px;
    .icon {
      font-size: 60px!important;
    }
    .text {
      font-size: 30px;
      margin-top: 15px;
    }
  }
}
</style>
